<template>
	<view class="content">
		<view class="top">
			<uni-nav-bar left-icon="back" fixed="true" backgroundColor="url('/webh5/static/topbgye.png')"
				:title="headText" color="white" @clickLeft="returnBack">
			</uni-nav-bar>
		</view>
		<block v-if="adsressList.length>0">
			<view class="heng flex" v-for="(item,index) in adsressList" :key="index" :data-index="index"
				@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+item.right+'px'" @click="goAddAdress('修改',item.id)">
				<view class="left">
					<view class="title">
						<text class="name">{{item.realName}}</text>
						<text class="phone">{{item.phone}}</text>
						<text class="moren" v-if="item.isDefault==1">{{item.isDefault==1?'默认':''}}</text>
					</view>
					<view class="adress-box">{{item.province}}-{{item.city}}-{{item.district}}-{{item.detail}}</view>
				</view>
				<view class="right" v-if="returnShow" @click="goChecked(index)">
					<image class="xuan" :src="radioType==index?'/static/xuan.png':'/static/weixuan.png'"></image>
				</view>
				<view class="right" v-if="!returnShow">
					<image class="xiang" src="/static/right.png"></image>
				</view>
				<view class="remove" @click.stop="delData(item)">删 除</view>
			</view>
		</block>
		<block v-else>
			<view class="kong-box">
				<view class="hengr flex" style="margin-top: 300rpx;">
					<image src="/static/konga.png"></image>
				</view>
				<view class="hengr flex">
					<text class="text">暂无收货地址</text>
				</view>
			</view>
		</block>
		<view class="btn-box flex">
			<button class="btn" hover-class="clickclass" @click="goAddAdress('添加')">添加新地址</button>
		</view>
	</view>
</template>

<script>
	var _this;
	const app = getApp();
	import {
		returnBackApp
	} from "@/utils/common.js";
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				headText: '', //自定义导航栏文字
				radioType: 0,
				adsressList: [],
				returnShow: false,
				//左滑默认宽度
				delBtnWidth: 80,
				startX: 0
			};
		},
		onLoad(options) {
			_this = this;
			_this.returnShow = options.type ? true : false;
			_this.headText = options.type?options.type+ '收货地址':'收货地址';
		},
		onShow() {
			_this.getAddress();
		},
		methods: {
			returnBack() {
				if (_this.returnShow) {
					// #ifdef H5
					const pages = getCurrentPages()
					if (pages.length > 1) {
						uni.navigateBack(1)
						return;
					}
					//使用vue-router返回上一级
					let a = this.$router.go(-1)
					if (a == undefined) {
						//重新定向跳转页面
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}
					return;
					// #endif
					uni.navigateBack(1)
				} else {
					returnBackApp();
				}
			},
			goChecked(type) {
				_this.radioType = type;
				if (_this.returnShow) {
					uni.setStorageSync('addressId', _this.adsressList[_this.radioType].id);
					uni.navigateBack(1)
				}
			},
			getAddress() {
				_this.$HTTP({
					method: 'GET',
					url: 'fjUserAddress/getAddress',
					data: {
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					if (res.data) {
						_this.adsressList = res.data;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			goAddAdress(type, id) {
				uni.navigateTo({
					url: `/pages/addAddress/addAddress?id=${id}&type=${type}`
				});
			},
			//开始触摸滑动
			drawStart(e) {
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				for (var index in this.adsressList) {
					this.$set(this.adsressList[index], 'right', 0);
				}
				var touch = e.touches[0];
				var item = this.adsressList[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
				if (disX >= 10) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.$set(this.adsressList[e.currentTarget.dataset.index], 'right', disX);
				} else {
					this.$set(this.adsressList[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				var item = this.adsressList[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.$set(this.adsressList[e.currentTarget.dataset.index], 'right', this.delBtnWidth);
				} else {
					this.$set(this.adsressList[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//删除方法
			delData(item) {
				uni.showModal({
					title: '提示',
					content: "确认删除该地址吗？",
					success: function(res) {
						if (res.confirm) {
							_this.$HTTP({
								method: 'GET',
								url: 'fjUserAddress/del?id='+item.id,
								data: {
									"time": Date.parse(new Date())
								},
								// header:'form' 
							}).then(res => {
								_this.adsressList.forEach(item => {
									item.right=0;
								})
								_this.getAddress();
							}).catch(err => {
								console.log(err)
							})
						} else if (res.cancel) {}
					}
				});
			},
		}
	}
</script>
<style lang="less">
	page {
		width: 100%;
		background: #FBFBFF;
	}
</style>
<style scoped lang="less">
	.top {
		width: 100%;
	}

	.alin {
		align-items: flex-start !important;
	}

	.huise {
		color: #C1C1C1;
	}

	.clickclass {
		transform: scale(0.9, 0.9);
	}

	.border {
		border-bottom: 1rpx solid #D1D1D1;
	}

	.remove {
		margin-left: -5%;
		width: 80px;
		height: 100%;
		background-color: red;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		right: -80px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
	}

	.content {
		width: 100%;
		overflow-x: hidden;

		.heng {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
			margin-bottom: 20rpx;
			box-sizing: border-box;
			padding: 20rpx 26rpx 20rpx 33rpx;
			align-items: center;
			justify-content: space-between;
			position: relative;

			.left {
				width: 100%;

				.title {
					width: 100%;

					.name {
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
					}

					.phone {
						font-size: 28rpx;
						font-weight: bold;
						color: #000000;
						margin-left: 20rpx;
					}

					.moren {
						font-size: 24rpx;
						font-weight: 400;
						color: #FF5A39;
						border: 1rpx solid #FF5A39;
						margin-left: 20rpx;
						box-sizing: border-box;
						padding: 0 5rpx;
						border-radius: 11rpx;
					}
				}

				.adress-box {
					width: 100%;
					margin-top: 15rpx;
					font-size: 25rpx;
					font-weight: 400;
					color: #000000;
				}
			}

			.right {
				width: 40rpx;
				height: 40rpx;
				margin-left: 50rpx;

				.xuan {
					width: 40rpx;
					height: 40rpx;
				}

				.xiang {
					width: 17rpx;
					height: 32rpx;
				}
			}
		}

		.kong-box {
			width: 100%;
			height: 700rpx;
			.hengr{
				width: 100%;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				image {
					width: 260rpx;
					height: 260rpx;
				}
				.text{
					font-size: 28rpx;
					font-weight: 400;
					color: #CCCCCC;
					margin-top: 15rpx;
				}
			}
		}

		.btn-box {
			width: 100%;
			align-items: center;
			background: #FFFFFF;
			box-sizing: border-box;
			padding:10rpx 60rpx 30rpx 60rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			.btn {
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				background: linear-gradient(90deg, #ABFCFF 0%, #A1BEFF 49%, #E0B1FF 100%);
				border-radius: 30rpx;
				text-align: center;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}
</style>
